<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>小黑的书架</h3>
        <ul>
            <!--
                复用;Vue 不会轻易删除DOM并重新创建DOM，因为这样很消耗性能，它会想尽一切办法少的去销毁DOM
                v-for 的默认复用策略：就地更新，当前删除一个元素后，还剩3个li，那么Vue就会把最后一个li删除，里面的内容平移，以复用所有现存的li

                v-for 时建议加上 key 属性，一般用唯一标识：id
                key 的设置要求：
                1.一定要在当前 v-for 中唯一
                2.必须是string 或 number
             -->

            <li v-for="(item,index) in booksList" :key="item.id">
                <input type="checkbox">
                <span>{{item.id}}</span>
                <span>{{item.name}}</span>
                <span>{{item.author}}</span>
                <button v-on:click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        /**
         * 目标：理解v-for中的 ：key的作用
         * 
         */
        const app = new Vue({
            el:'#app',
            data:{
                booksList:[
                    {id:1,name:'《红楼梦》',author:'曹雪芹'},
                    {id:2,name:'《西游记》',author:'吴承恩'},
                    {id:3,name:'《水浒传》',author:'施耐庵'},
                    {id:4,name:'《三国演义》',author:'罗贯中'}
                ]
            },
            methods:{
                del(id){
                    //4.根据id删除数据
                    //console.log('我要删除')
                    //4.1 根据id找到索引，根据索引删除元素
                    //forEach map reduce find findIndex
                    //const index = this.booksList.findIndex(item => item.id === id)
                    //this.booksList.splice(index,1)
                    //4.2 filter 筛选不符合id的元素，把新数组覆盖回老数组
                    //filter 不会修改原数组，返回一个新数组
                    this.booksList = this.booksList.filter(item => item.id !==id)
                }
            }
        })
    </script>
</body>
</html>